<template>
  <div class="bg-gray">
    <b-container>
      <b-row>
        <b-col>
          <b-breadcrumb class="bg-gray bread-border mb-1">
            <b-breadcrumb-item to="/space">
              <b-icon icon="house-fill" scale="1.25" shift-v="1.25"/>
              个人空间
            </b-breadcrumb-item>
            <b-breadcrumb-item active>收件地址</b-breadcrumb-item>
          </b-breadcrumb>
        </b-col>
      </b-row>
      <!--      main-->
      <b-row class="justify-content-center">

        <b-col cols="12" md="8" class="mb-1" v-for="(item,index) in dataarray">

          <b-row class="justify-content-center" v-if="index === changing">
            <b-col cols="12">
              <h5 class="text-center mt-2">修改收件地址</h5>
              <b-form-group
                  id="ieldset-1"
                  label="收件人："
                  label-for="nput-1"
                  class="mb-1"
              >
                <b-form-input
                    id="nput-1"
                    v-model="form.name"
                    :state="status.name"
                    trim
                    placeholder="不能为空"
                    @blur="validName"
                ></b-form-input>
                <b-form-invalid-feedback v-text="warn.name"></b-form-invalid-feedback>
              </b-form-group>
              <b-form-group
                  id="ieldset-2"
                  label="号码："
                  label-for="nput-2"
                  class="mb-1"
              >
                <b-form-input
                    id="nput-2"
                    v-model="form.phone"
                    :state="status.phone"
                    trim
                    placeholder="不能为空"
                    @blur="validPhone"
                ></b-form-input>
                <b-form-invalid-feedback v-text="warn.phone"></b-form-invalid-feedback>
              </b-form-group>
              <b-form-group
                  id="ieldset-4"
                  label="地区："
                  label-for="nput-4"
                  class="mb-1"
              >
                <v-region
                    id="nput-4"
                    :town="true"
                    type="group"
                    @values="change"
                    :value="form"
                ></v-region>
              </b-form-group>
              <b-form-group
                  id="ieldset-3"
                  label="详细地址："
                  label-for="nput-3"
                  class="mb-1"
              >
                <b-form-input
                    id="nput-3"
                    v-model="form.detail"
                    :state="status.detail"
                    trim
                    placeholder="不能为空"
                    @blur="validDetail"
                ></b-form-input>
                <b-form-invalid-feedback v-text="warn.detail"></b-form-invalid-feedback>
              </b-form-group>
              <p class="text-center mt-3">
                <b-button class="px-5 mr-3" variant="primary" @click="submit(item.receid)">确定</b-button>
                <b-button class="px-5" variant="" @click="resetChanging">取消</b-button>
              </p>
            </b-col>
          </b-row>
          <b-row class="mx-0 " v-else>
            <b-col class="my-auto px-1">
              <h5 class="mb-0 mt-1">{{item.name}}</h5>
              <h6 class="mb-0 mt-1">{{item.phone}}</h6>
            </b-col>
            <b-col class="text-right my-auto px-1">
              <b-button class="mr-3" variant="info" @click="showchange(index)">修改</b-button>
              <b-button variant="danger" @click="deleteitem(index)">删除</b-button>
            </b-col>
            <b-col cols="12" class="bread-border px-1 pb-2">
              <p class="my-1">{{item.address}} {{item.detail}}</p>
            </b-col>
          </b-row>
        </b-col>


        <b-col cols="12" class="text-center" v-if="showadd">
          <b-button class="px-5 mt-2" variant="primary" @click="showaddform">
            新增收件地址
          </b-button>
        </b-col>
        <b-col cols="12" md="8" v-else>
          <b-row class="justify-content-center">
            <b-col cols="12">
              <h5 class="text-center mt-2">新增收件地址</h5>
              <b-form-group
                  id="fieldset-1"
                  label="收件人："
                  label-for="input-1"
                  class="mb-1"
              >
                <b-form-input
                    id="input-1"
                    v-model="form.name"
                    :state="status.name"
                    trim
                    placeholder="不能为空"
                    @blur="validName"
                ></b-form-input>
                <b-form-invalid-feedback v-text="warn.name"></b-form-invalid-feedback>
              </b-form-group>
              <b-form-group
                  id="fieldset-2"
                  label="号码："
                  label-for="input-2"
                  class="mb-1"
              >
                <b-form-input
                    id="input-2"
                    v-model="form.phone"
                    :state="status.phone"
                    trim
                    placeholder="不能为空"
                    @blur="validPhone"
                ></b-form-input>
                <b-form-invalid-feedback v-text="warn.phone"></b-form-invalid-feedback>
              </b-form-group>
              <b-form-group
                  id="fieldset-4"
                  label="地区："
                  label-for="input-4"
                  class="mb-1"
              >
              <v-region id="input-4" :town="true" type="group" @values="change"></v-region>
              </b-form-group>
              <b-form-group
                  id="fieldset-3"
                  label="详细地址："
                  label-for="input-3"
                  class="mb-1"
              >
                <b-form-input
                    id="input-3"
                    v-model="form.detail"
                    :state="status.detail"
                    trim
                    placeholder="不能为空"
                    @blur="validDetail"
                ></b-form-input>
                <b-form-invalid-feedback v-text="warn.detail"></b-form-invalid-feedback>
              </b-form-group>
              <p class="text-center mt-3">
                <b-button class="px-5 mr-3" variant="primary" @click="submit('')">确定</b-button>
                <b-button class="px-5" variant="" @click="showadd = true">取消</b-button>
              </p>
            </b-col>
          </b-row>
<!--          <v-region :town="true" type="group" @values="change"></v-region>-->
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
  export default {
    name: "Receivings",
    data() {
      return {
        form:{
          name:'',
          phone:'',
          detail:'',
          address:'',
          province:'',
          city:'',
          area:'',
          town:'',
        },
        status:{
          name:null,
          phone:null,
          detail:null,
        },
        warn:{
          name:'',
          phone:'',
          detail:'',
        },
        showadd:true,
        dataarray:[],
        changing:null,
      }
    },
    methods:{
      change(data){
        if (data.province && data.city && data.area &&data.town){

        this.form.province = data.province.key
        this.form.city = data.city.key
        this.form.area = data.area.key
        this.form.town = data.town.key
        let province = data.province?data.province.value:''
        let city = data.city?data.city.value:''
        let area = data.area?data.area.value:''
        let town = data.town?data.town.value:''
        this.form.address = province+city+area+town

        }else{
          return false
        }
      },
      validName(){
        if (this.form.name === ''){
          this.status.name = false
          this.warn.name = '姓名不能为空'
          return false
        }else if (this.form.name.length > 10){
          this.status.name = false
          this.warn.name = '姓名不能超过10个字'
          return false
        }else{
          this.status.name = true
          return true
        }
      },
      validPhone(){
        let pattern  =/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
        if (this.form.phone === ''){
          this.status.phone = false
          this.warn.phone = '号码不能为空'
          return false
        }else if (!pattern.test(this.form.phone)){
          this.status.phone = false
          this.warn.phone = '号码格式不对'
          return false
        }else{
          this.status.phone = true
          return true
        }
      },
      validDetail(){
        if (this.form.detail === ''){
          this.status.detail = false
          this.warn.detail = '详细地址不能为空'
          return false
        }else if (this.form.detail.length > 40){
          this.status.detail = false
          this.warn.detail = '详细地址不能超过40个字'
          return false
        }else{
          this.status.detail = true
          return true
        }
      },
      submit(receid = ''){
        if (this.validName()&&this.validPhone()&&this.validDetail()){
          let data = {
            uuid:this.$store.state.uuid,
            name:this.$ajax.encode(this.form.name),
            phone:this.$ajax.encode(this.form.phone),
            address:this.$ajax.encode(this.form.address),
            detail:this.$ajax.encode(this.form.detail),
            province:this.form.province,
            city:this.form.city,
            area:this.form.area,
            town:this.form.town
          }
          let url
          if (receid !== ''){
            url = '/user/updateReceiving'
            data.receid = receid
          }else{
            url = '/user/addReceiving'
          }
          // console.log(data);
          // console.log(url);
          this.$ajax.post(url,data).then(resp=>{
            let data = resp.data
            if(data.code === 200){
              if (receid==='') {
                this.dataarray.push(data.data)
              }
              this.makeToast(data.msg)
              this.showadd = true
              this.resetChanging()
              this.changing = null
            }else{
              this.makeToast(data.msg,false)
            }
          }).catch(error=>{
            this.makeToast("提交失败！",false)
            console.log(error);
          })
        }
      },
      makeToast(msg, res = true) {
        this.$bvToast.toast(msg, {
          title: res ? '操作成功!' : '操作失败！',
          variant: res ? 'primary' : 'danger',
          solid: true,
          autoHideDelay: 5000,
        })
      },
      initData(){
        let data ={
          uuid:this.$store.state.uuid
        }
        this.$ajax.post('/user/getReceivings',data).then(resp=>{
          let data = resp.data
          if (data.code === 200){
            this.dataarray = data.data
          }else{
            this.makeToast(data.msg,false)
          }
        }).catch(error=>{
          this.makeToast("获取列表失败！",false)
          console.log(error);
        })
      },
      deleteitem(index){
        let data = {
          receid : this.dataarray[index].receid
        }
        this.$ajax.post('/user/delReceiving',data).then(resp=>{
          let data = resp.data
          if(data.code === 200){
            this.dataarray.splice(index,1)
            this.makeToast(data.msg)
          }else{
            this.makeToast(data.msg,false)
          }
        }).catch(error=>{
          this.makeToast("提交失败！",false)
          console.log(error);
        })
      },
      showchange(index){
        this.showadd = true
        this.changing = index
        let data = this.dataarray[index]
        data.province = data.province+''
        data.city = data.city+''
        data.area = data.area+''
        data.town = data.town+''
        this.form = data
      },
      resetChanging(){
        this.form = {
          name:'',
          phone:'',
          detail:'',
          address:'',
          province:'',
          city:'',
          area:'',
          town:'',
        }
        this.changing = null
        this.status.name = null
        this.status.phone = null
        this.status.detail = null
        this.showadd = true
      },
      showaddform(){

        this.resetChanging()
        this.showadd = false
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>

<style scoped>
  .bread-border {
    border-bottom: #c6c6c6 solid 1px;
    border-radius: 0;
  }


</style>